<template>
  <div class="container" v-loading="loading">
    <div class="box1">
      <div class="cent">
        <div class="title">
          <div class="text">年龄数据</div>
          <div class="text1" @click="jump('/web/age')">详情>></div>
        </div>
        <div
          class="echart"
          id="chart"
          v-show="detail && detail.list.length"
        ></div>
        <div
          class="echart"
          v-if="detail && detail.list.length == 0"
          style="display: flex; align-items: center; justify-content: center"
        >
          <el-empty description="暂无数据" :image-size="fontSize"></el-empty>
        </div>
      </div>
      <div class="cent">
        <div class="title">
          <div class="text">性别数据</div>
          <div class="text1" @click="jump('/web/gender')">详情>></div>
        </div>
        <div
          class="echart"
          id="chart1"
          v-show="detail && detail.list1.length"
        ></div>
        <div
          class="echart"
          v-if="detail && detail.list1.length == 0"
          style="display: flex; align-items: center; justify-content: center"
        >
          <el-empty description="暂无数据" :image-size="fontSize"></el-empty>
        </div>
      </div>
      <div class="cent">
        <div class="title">
          <div class="text">市级数据</div>
          <div class="text1" @click="jump('/web/city')">详情>></div>
        </div>
        <div
          class="echart"
          id="chart2"
          v-show="detail && detail.list2.length"
        ></div>
        <div
          class="echart"
          v-if="detail && detail.list2.length == 0"
          style="display: flex; align-items: center; justify-content: center"
        >
          <el-empty description="暂无数据" :image-size="fontSize"></el-empty>
        </div>
      </div>
    </div>
    <div class="box2">
      <div class="titt"  @click="jump('/web/flowing')">曜祺百货电商平台</div>
      <div class="top">
        <div style="display: flex">
          <el-date-picker
            @change="dp_data"
            v-model="time"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
          <el-button
            type="primary"
            size="small"
            style="margin-left: 0.2rem"
            @click="dp_data"
            >搜索</el-button
          >
        </div>
        <div style="display: flex">
          <el-button
            type="success"
            size="small"
            @click="jump('/web/flowing')"
            >数据管理</el-button
          >
          <el-button
            type="warning"
            size="small"
            @click="jump('https://www.oceanengine.com/')"
            >广告投放</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="jump('https://chuangyi.taobao.com/')"
            >落地页制作</el-button
          >
        </div>
      </div>
      <div class="cett">
        <div class="topp">
          <div class="topp_tt">
            <div class="topp_tt1">展示数</div>
            <div class="topp_tt2">
              <animate-number
                from="0"
                duration="2000"
                :key="key"
                :formatter="formatter"
                :to="detail ? detail.cent.t1 : 0"
              ></animate-number>
            </div>
          </div>
          <div class="topp_tt">
            <div class="topp_tt1" style="font-size: 0.2rem; color: #fff">
              总花费
            </div>
            <div class="topp_tt2" style="font-size: 0.6rem; margin-top: 0.15rem">
              <animate-number
                from="0"
                :key="key"
                :formatter="formatter"
                :to="detail ? detail.cent.t2 : 0"
              ></animate-number>
            </div>
          </div>
          <div class="topp_tt">
            <div class="topp_tt1">点击数</div>
            <div class="topp_tt2">
              <animate-number
                from="0"
                duration="2000"
                :key="key"
                :formatter="formatter"
                :to="detail ? detail.cent.t3 : 0"
              ></animate-number>
            </div>
          </div>
        </div>
        <div class="cttt">
          <div class="topp_tt">
            <div class="topp_tt1">平均点击单价</div>
            <div class="topp_tt2">
              <animate-number
                from="0"
                duration="2000"
                :key="key"
                :formatter="formatter"
                :to="detail ? detail.cent.t4 : 0"
              ></animate-number>
            </div>
          </div>
          <div class="topp_tt">
            <div class="topp_tt1">平均千次展现费用</div>
            <div class="topp_tt2">
              <animate-number
                from="0"
                duration="2000"
                :key="key"
                :formatter="formatter"
                :to="detail ? detail.cent.t5 : 0"
              ></animate-number>
            </div>
          </div>
          <div class="topp_tt">
            <div class="topp_tt1">有效播放数</div>
            <div class="topp_tt2">
              <animate-number
                from="0"
                duration="2000"
                :key="key"
                :formatter="formatter"
                :to="detail ? detail.cent.t6 : 0"
              ></animate-number>
            </div>
          </div>
          <div class="topp_tt">
            <div class="topp_tt1">有效播放成本</div>
            <div class="topp_tt2">
              <animate-number
                from="0"
                duration="2000"
                :key="key"
                :formatter="formatter"
                :to="detail ? detail.cent.t7 : 0"
              ></animate-number>
            </div>
          </div>
          <div class="topp_tt">
            <div class="topp_tt1">有效播放率</div>
            <div class="topp_tt2">
              <animate-number
                from="0"
                duration="2000"
                :key="key"
                :formatter="formatter"
                :to="detail ? detail.cent.t8 : 0"
              ></animate-number>
            </div>
          </div>
          <div class="topp_tt">
            <div class="topp_tt1">点击率</div>
            <div class="topp_tt2">
              <animate-number
                from="0"
                duration="2000"
                :key="key"
                :formatter="formatter"
                :to="detail ? detail.cent.t9 : 0"
              ></animate-number>
            </div>
          </div>
          <div class="topp_tt">
            <div class="topp_tt1">播放数</div>
            <div class="topp_tt2">
              <animate-number
                from="0"
                duration="2000"
                :key="key"
                :formatter="formatter"
                :to="detail ? detail.cent.t10 : 0"
              ></animate-number>
            </div>
          </div>
          <div class="topp_tt">
            <div class="topp_tt1">转化数</div>
            <div class="topp_tt2">
              <animate-number
                from="0"
                duration="2000"
                :key="key"
                :formatter="formatter"
                :to="detail ? detail.cent.t11 : 0"
              ></animate-number>
            </div>
          </div>
          <div class="topp_tt">
            <div class="topp_tt1">转化成本</div>
            <div class="topp_tt2">
              <animate-number
                from="0"
                duration="2000"
                :key="key"
                :formatter="formatter"
                :to="detail ? detail.cent.t12 : 0"
              ></animate-number>
            </div>
          </div>
          <div class="topp_tt">
            <div class="topp_tt1">转化率</div>
            <div class="topp_tt2">
              <animate-number
                from="0"
                duration="2000"
                :key="key"
                :formatter="formatter"
                :to="detail ? detail.cent.t13 : 0"
              ></animate-number>
            </div>
          </div>
        </div>
      </div>
      <div class="cent">
        <div class="title">
          <div class="text">广告计划</div>
          <div class="text1" @click="jump('/web/advertisement')">详情>></div>
        </div>
        <div class="table1" v-if="detail && detail.list3.length">
          <div class="table1_top">
            <div class="tt1 text-cut1">编号</div>
            <div class="tt2 text-cut1">广告名称</div>
            <div class="tt3 text-cut1">预算</div>
            <div class="tt4 text-cut1">预算类型</div>
            <div class="tt5 text-cut2">点击出价/展示出价</div>
            <div class="tt6 text-cut2">目标转化出价/预期成本</div>
            <div class="tt7 text-cut2">深度优化出价</div>
            <div class="tt8 text-cut2">深度转化ROI系数</div>
            <div class="tt9 text-cut1">广告状态</div>
            <div class="tt10 text-cut1">创建时间</div>
          </div>
          <div class="table1_cett" v-for="(item, index) in detail.list3">
            <div class="tt1">{{ index + 1 }}</div>

            <el-tooltip
              class="item"
              effect="dark"
              :content="item.promotion_name"
              placement="top"
            >
              <div class="tt2 text-cut1" style="cursor: pointer">
                {{ item.promotion_name }}
              </div>
            </el-tooltip>

            <div class="tt3 text-cut1">{{ item.budget }}</div>
            <div class="tt4 text-cut1">
              <div
                v-if="item.budget_mode == 'BUDGET_MODE_INFINITE'"
                style="color: #67c23a"
              >
                不限
              </div>
              <div
                type="primary"
                v-if="item.budget_mode == 'BUDGET_MODE_DAY'"
                style="color: #409eff"
              >
                日预算
              </div>
              <div
                type="success"
                v-if="item.budget_mode == 'BUDGET_MODE_TOTAL'"
                style="color: #e6a23c"
              >
                总预算
              </div>
            </div>
            <div class="tt5 text-cut1">{{ item.bid ? item.bid : "--" }}</div>
            <div class="tt6 text-cut1">
              {{ item.cpa_bid ? item.cpa_bid : "--" }}
            </div>
            <div class="tt7 text-cut1">
              {{ item.deep_cpabid ? item.deep_cpabid : "--" }}
            </div>
            <div class="tt8 text-cut1">
              {{ item.roi_goal ? item.roi_goal : "--" }}
            </div>
            <div class="tt9 text-cut1">
              <div v-if="item.status == 'NOT_DELETED' || item.status == 'ALL'">
                不限
              </div>
              <div style="color: #409eff" v-if="item.status == 'OK'">
                投放中
              </div>
              <div style="color: red" v-if="item.status == 'DELETED'">
                已删除
              </div>
              <div
                class="text-cut1"
                style="color: #aaa"
                v-if="item.status == 'PROJECT_OFFLINE_BUDGET'"
              >
                项目超出预算
              </div>
              <div
                class="text-cut1"
                style="color: #aaa"
                v-if="item.status == 'PROJECT_PREOFFLINE_BUDGET'"
              >
                项目接近预算
              </div>
              <div
                class="text-cut1"
                style="color: #aaa"
                v-if="item.status == 'TIME_NO_REACH'"
              >
                未到达投放时间
              </div>
              <div
                class="text-cut1"
                style="color: #409eff"
                v-if="item.status == 'TIME_DONE'"
              >
                已完成
              </div>
              <div
                class="text-cut1"
                style="color: #aaa"
                v-if="item.status == 'NO_SCHEDULE'"
              >
                不在投放时段
              </div>
              <div
                class="text-cut1"
                style="color: blue"
                v-if="item.status == 'AUDIT'"
              >
                新建审核中
              </div>
              <div
                class="text-cut1"
                style="color: blue"
                v-if="item.status == 'REAUDIT'"
              >
                修改审核中
              </div>
              <div
                class="text-cut1"
                style="color: red"
                v-if="item.status == 'FROZEN'"
              >
                已终止
              </div>
              <div
                class="text-cut1"
                style="color: red"
                v-if="item.status == 'AUDIT_DENY'"
              >
                审核不通过
              </div>
              <div
                class="text-cut1"
                style="color: red"
                v-if="item.status == 'OFFLINE_BUDGET'"
              >
                广告超出预算
              </div>
              <div
                class="text-cut1"
                style="color: red"
                v-if="item.status == 'OFFLINE_BALANCE'"
              >
                账户余额不足
              </div>
              <div
                class="text-cut1"
                style="color: orange"
                v-if="item.status == 'PREOFFLINE_BUDGET'"
              >
                广告接近预算
              </div>
              <div
                class="text-cut1"
                style="color: #aaa"
                v-if="item.status == 'DISABLED'"
              >
                已暂停
              </div>
              <div
                class="text-cut1"
                style="color: #aaa"
                v-if="item.status == 'PROJECT_DISABLED'"
              >
                已被项目暂停
              </div>
              <div
                class="text-cut1"
                style="color: orange"
                v-if="item.status == 'LIVE_ROOM_OFF'"
              >
                关联直播间不可投
              </div>
              <div
                class="text-cut1"
                style="color: orange"
                v-if="item.status == 'PRODUCT_OFFLINE'"
              >
                关联商品不可投
              </div>
              <div
                class="text-cut1"
                style="color: orange"
                v-if="item.status == 'AWEME_ACCOUNT_DISABLED'"
              >
                关联抖音账号不可投
              </div>
              <div
                class="text-cut1"
                style="color: orange"
                v-if="item.status == 'AWEME_ANCHOR_DISABLED'"
              >
                锚点不可投
              </div>
              <div
                class="text-cut1"
                style="color: #aaa"
                v-if="item.status == 'DISABLE_BY_QUOTA'"
              >
                已暂停
              </div>
              <div
                class="text-cut1"
                style="color: blue"
                v-if="item.status == 'CREATE'"
              >
                新建
              </div>
              <div
                class="text-cut1"
                style="color: orange"
                v-if="item.status == 'ADVERTISER_OFFLINE_BUDGET'"
              >
                账号超出预算
              </div>
              <div
                class="text-cut1"
                style="color: orange"
                v-if="item.status == 'ADVERTISER_PREOFFLINE_BUDGET'"
              >
                账号接近预算
              </div>
            </div>
            <div class="tt10 text-cut1">{{ item.promotion_create_time }}</div>
          </div>
        </div>
        <div
          class="table1"
          v-if="detail && detail.list3.length == 0"
          style="display: flex; align-items: center; justify-content: center"
        >
          <el-empty description="暂无数据" :image-size="fontSize"></el-empty>
        </div>
      </div>
    </div>
    <div class="box3">
      <div class="cent">
        <div class="title">
          <div class="text">抖音数据</div>
          <div class="text1" @click="jump('/web/tiktok')">详情>></div>
        </div>
        <div
          class="echart"
          id="chart3"
          v-show="detail && detail.list4.length"
        ></div>
        <div
          class="table1"
          v-if="detail && detail.list4.length == 0"
          style="display: flex; align-items: center; justify-content: center"
        >
          <el-empty description="暂无数据" :image-size="fontSize"></el-empty>
        </div>
      </div>
      <div class="cent" style="height: 66%">
        <div class="title">
          <div class="text">自定义落地页</div>
          <div class="text1" @click="jump('/web/landing')">详情>></div>
        </div>
        <div class="table" v-if="detail && detail.list5.length">
          <div class="center" v-for="item in detail.list5">
            <el-image
              style="width: 0.7rem; height: 0.7rem"
              :src="getImageSrc(item.thumbnail)"
              :preview-src-list="[getImageSrc(item.thumbnail)]"
            >
            </el-image>
            <div class="text1">
              <div class="ttt text-cut1">{{ item.name }}</div>
              <div class="ttt1 text-cut1">
                <div
                  style="color: #67c23a"
                  v-if="item.audit_status == 'ENABLE'"
                >
                  已上线
                </div>
                <div
                  style="color: orange"
                  v-if="item.audit_status == 'DISABLE'"
                >
                  不可用
                </div>
                <div
                  style="color: red"
                  type="warning"
                  v-if="item.audit_status == 'DELETED'"
                >
                  已删除
                </div>
                <div style="color: orange" v-if="item.audit_status == 'EDIT'">
                  未上线
                </div>
                <div
                  style="color: orange"
                  type="warning"
                  v-if="item.audit_status == 'FORBIDDEN'"
                >
                  站点下线
                </div>
                <div
                  style="color: #409eff"
                  type="primary"
                  v-if="item.audit_status == 'AUDIT_ACCEPTED'"
                >
                  审核通过
                </div>
                <div
                  style="color: #f56c6c"
                  type="danger"
                  v-if="item.audit_status == 'AUDIT_REJECTED'"
                >
                  审核拒绝
                </div>
                <div
                  style="color: orange"
                  type="warning"
                  v-if="item.audit_status == 'AUDIT_BANNED'"
                >
                  审核封禁
                </div>
                <div
                  style="color: #67c23a"
                  type="success"
                  v-if="item.audit_status == 'AUDIT_DOING'"
                >
                  审核中
                </div>
              </div>
            </div>
            <div class="text2" @click="jump(item.url)">预览</div>
          </div>
        </div>
        <div
          class="table"
          v-if="detail && detail.list5.length == 0"
          style="display: flex; align-items: center; justify-content: center"
        >
          <el-empty description="暂无数据" :image-size="fontSize"></el-empty>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
var myChart1, myChart, myChart2, myChart3;
var autotime, autotime1, autotime2, autotime3;
export default {
  data() {
    return {
      time: "",
      fontSize: 12,
      detail: "",
      loading: false,
      key: 0,
      tttindex: 0,
      tttindex1: 0,
      tttindex2: 0,
      tttindex3: 0,
    };
  },
  created() {
    var that = this;
    const currentDate = new Date();
    const year = currentDate.getFullYear();
    const month = currentDate.getMonth() + 1;
    const day = currentDate.getDate();
    var newday = year + "-" + month + "-" + day;
    that.time = [newday, newday];
    this.fontSize = this.getRem(1920, 1080, 100);
    window.addEventListener("resize", function () {
      that.fontSize = that.getRem(1920, 1080, 100);
    });
    that.dp_data();
  },
  methods: {
    autotime() {
      const that = this;
      clearInterval(autotime);
      var detail = JSON.parse(JSON.stringify(this.detail.list));
      var length = detail.length - 1;
      autotime = setInterval(function () {
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: that.tttindex, //默认选中第二个
        });
        that.tttindex++;
        if (that.tttindex > length) {
          that.tttindex = 0;
        }
      }, 3000);
    },
    autotime1() {
      const that = this;
      clearInterval(autotime1);
      var detail = JSON.parse(JSON.stringify(this.detail.list1));
      var length = detail.length - 1;
      autotime1 = setInterval(function () {
        myChart1.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: that.tttindex1, //默认选中第二个
        });
        that.tttindex1++;
        if (that.tttindex1 > length) {
          that.tttindex1 = 0;
        }
      }, 3000);
    },
    autotime2() {
      const that = this;
      clearInterval(autotime2);
      var detail = JSON.parse(JSON.stringify(this.detail.list2));
      var length = detail.length - 1;
      autotime2 = setInterval(function () {
        myChart2.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: that.tttindex2, //默认选中第二个
        });
        that.tttindex2++;
        if (that.tttindex2 > length) {
          that.tttindex2 = 0;
        }
      }, 3000);
    },
    autotime3() {
    //  <!--language: JavaScript-->
 const that = this;
      clearInterval(autotime3);
      var detail = JSON.parse(JSON.stringify(this.detail.list4));
      var length = detail.length - 1;
      autotime3 = setInterval(function () {
        myChart3.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: that.tttindex3, //默认选中第二个
        });
        that.tttindex3++;
        if (that.tttindex3 > length) {
          that.tttindex3 = 0;
        }
      }, 3000);
    },
    formatter: function (num) {
      return num.toFixed(2);
    },
    dp_data() {
      this.loading = true;
      this.$api
        .post("/api/demo/dp_data", { time: this.time })
        .then((res) => {
          this.detail = res.data;
          this.key++;
          this.$nextTick(function () {
            // 判断是否有数据
            if (this.detail.list.length) {
              // 调用图表函数
              this.chart();
              // 调用自动时间函数
              this.autotime();
            }
            if (this.detail.list1.length) {
              this.chart1();
              this.autotime1();
            }
            if (this.detail.list2.length) {
              this.chart2();
              this.autotime2();
            }
            if (this.detail.list4.length) {
              this.chart3();
              this.autotime3();
            }
          });
          this.loading = false;
        })
        .catch((err) => {
          this.apiErr(err);
        })
        .finally(() => {
          this.loading = false;
          this.loadingHide();
        });
    },
   jump(url) {
      // 打开url
      window.open(url);
    },
   getRem(pwidth, pheight, prem) {
      let fontSize;
      //获取html元素
      var html = document.getElementsByTagName("html")[0];
      var oHeight = window.innerHeight>700?window.innerHeight:700;
      var oWidth = window.innerWidth > 1200 ? window.innerWidth : 1200;
      //计算宽高比
      let pd = pheight / pwidth;
      let tpd = oHeight / oWidth;
      //console.log(pd, tpd, tpd < pd)
      //如果屏幕宽高比小于图片宽高比，则设置html元素的字体大小为图片高度乘以rem值
      if (tpd < pd) {
        fontSize = (oHeight / pheight) * prem;
      //如果屏幕宽高比大于图片宽高比，则设置html元素的字体大小为图片宽度乘以rem值
      } else {
        fontSize = (oWidth / pwidth) * prem;
      }
      //设置html元素的字体大小
      html.style.fontSize = parseInt(fontSize) + "px";
      //返回html元素的字体大小
      return parseInt(fontSize);
    },
    chart() {
     myChart = echarts.init(document.getElementById("chart"));
      var that = this;
      var detail = JSON.parse(JSON.stringify(this.detail.list));
      var data = [];
      detail.map((item) => {
        data.push(item.name);
      });
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c}元",
        },
        legend: {
          type: "scroll",
          pageIconColor: "#44e6fd",
          pageIconInactiveColor: "#fbffff",
          border: 0,
          pageTextStyle: {
            color: "#35ffff",
          },
          left: "center",
          data: data,
          textStyle: {
            color: "#fff",
          },
          top: "2%",
        },
        series: [
          {
            name: "漏斗图",
            type: "funnel",
            left: "10%",
            top: 40,
            //x2: 80,
            bottom: 15,
            width: "80%",
            // height: {totalHeight} - y - y2,
            sort: "descending",
            gap: 2,
            label: {
              show: true,
              position: "inside",
            },

            data: detail,
            label: {
              normal: {
                show: true,
                color: "#fff",
                position: "center",
              },
            },
          },
        ],
      };
     myChart.on("mouseover", function (params) {
        // 鼠标移入时，清除自动时间
        clearInterval(autotime);
      });

      myChart.on("mouseout", function (params) {
        // 鼠标移出时，重新开始自动时间
        that.autotime();
      });
      option && myChart.setOption(option, true);
      // 监听窗口大小变化事件，重新设置图表大小
      window.addEventListener("resize", function () {
        myChart && myChart.resize();
      });
    },
    chart1() {
      var that = this;
      myChart1 = echarts.init(document.getElementById("chart1"));
      var detail = JSON.parse(JSON.stringify(this.detail.list1));
      var data = [];
      detail.map((item) => {
        data.push(item.name);
      });
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} 元",
        },
        legend: {
          type: "scroll",
          pageIconColor: "#44e6fd",
          pageIconInactiveColor: "#fbffff",
          pageTextStyle: {
            color: "#35ffff",
          },
          left: "center",
          data: data,
          textStyle: {
            color: "#fff",
          },
          top: "2%",
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "60%",
            center: ["50%", "50%"],
            data: detail,
            label: {
              normal: {
                show: true,
                color: "#fff",
                // position: 'center'
              },
            },
          },
        ],
      };
      myChart1.on("mouseover", function (params) {
        clearInterval(autotime1);
      });

      myChart1.on("mouseout", function (params) {
        that.autotime1();
      });
      option && myChart1.setOption(option);
      window.addEventListener("resize", function () {
        myChart1 && myChart1.resize();
      });
    },
    chart2() {
      var that = this;
      myChart2 = echarts.init(document.getElementById("chart2"));
      var detail = JSON.parse(JSON.stringify(this.detail.list2));
      var data = [];
      var data1 = [];
      detail.map((item) => {
        data.push(item.name);
        data1.push(item.value);
      });
      var option = {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        // legend: {
        //   data: data,
        //   type: "scroll",
        //   pageIconColor: "#44e6fd",
        //   pageIconInactiveColor: "#fbffff",
        //   border: 0,
        //   pageTextStyle: {
        //     color: "#35ffff",
        //   },
        //   left: "center",
        //   textStyle: {
        //     color: "#fff",
        //   },
        //   top: "0%",
        // },
        grid: {
          left: "3%",
          right: "4%",
          bottom: data.length > 5 ? "20%" : "8%",
          top: "5%",
          containLabel: true,
        },
        dataZoom: [
          {
            //添加dataZoom属性即可显示滑动条
            type: "slider",
            show: data.length > 5 ? true : false, //flase直接隐藏图形
            xAxisIndex: [0],
            height: 20,
            width: "75%",
            left: "12%", //滚动条靠左侧的百分比
            textStyle: {
              color: "#fff",
            },
            bottom: 20,
            start: 0, //滚动条的起始位置
            end:  data.length > 5 ?50:100, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
          },
        ],
        xAxis: [
          {
            type: "category",
            data: data,
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              textStyle: {
                // 设置标签文字样式
                color: "#fff",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: {
                // 设置标签文字样式
                color: "#fff",
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            barWidth: "60%",
            data: data1,
          },
        ],
      };
      myChart2.on("mouseover", function (params) {
        clearInterval(autotime2);
      });

      myChart2.on("mouseout", function (params) {
        that.autotime2();
      });
      option && myChart2.setOption(option);
      window.addEventListener("resize", function () {
        myChart2 && myChart2.resize();
      });
    },
    chart3() {
      var that = this;
      myChart3 = echarts.init(document.getElementById("chart3"));
      var detail = JSON.parse(JSON.stringify(this.detail.list4));
      var data = [];

      var typelist = ["点击数", "展示数", "播放数", "总花费"];
      var listt1 = [];
      var listt2 = [];
      var listt3 = [];
      var listt4 = [];
      detail.map((item) => {
        data.push(item.stat_datetime);
        listt1.push(item.click);
        listt2.push(item.show);
        listt3.push(item.total_play);
        listt4.push(item.cost);
      });
      var data1 = [
        {
          name: "点击数",
          type: "line",
          stack: "总量",
          data: listt1,
        },
        {
          name: "展示数",
          type: "line",
          stack: "总量",
          data: listt2,
        },
        {
          name: "播放数",
          type: "line",
          stack: "总量",
          data: listt3,
        },
        {
          name: "总花费",
          type: "line",
          stack: "总量",
          data: listt4,
        },
      ];

      var option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          type: "scroll",
          pageIconColor: "#44e6fd",
          pageIconInactiveColor: "#fbffff",
          border: 0,
          pageTextStyle: {
            color: "#35ffff",
          },
          left: "center",
          textStyle: {
            color: "#fff",
          },
          top: "3%",
          data: typelist,
        },
        grid: {
          left: "3%",
          right: "10%",
          bottom: data.length > 5 ? "20%" : "10%",
          containLabel: true,
        },
        dataZoom: [
          {
            //添加dataZoom属性即可显示滑动条
            type: "slider",
            show: data.length > 5 ? true : false, //flase直接隐藏图形
            xAxisIndex: [0],
            height: 20,
            width: "60%",
            left: "20%", //滚动条靠左侧的百分比
            textStyle: {
              color: "#fff",
            },
            bottom: 20,
            start: 0, //滚动条的起始位置
            end:  data.length > 5 ?50:100, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
          },
        ],
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: data,
          axisLabel: {
            textStyle: {
              // 设置标签文字样式
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              // 设置标签文字样式
              color: "#fff",
            },
          },
        },
        series: data1,
      };
      myChart3.on("mouseover", function (params) {
        clearInterval(autotime3);
      });

      myChart3.on("mouseout", function (params) {
        that.autotime3();
      });
      option && myChart3.setOption(option);
      window.addEventListener("resize", function () {
        myChart3 && myChart3.resize();
      });
    },
  },
};
</script>
<style lang="scss">
.container {
  .el-date-editor--daterange.el-input,
  .el-date-editor--daterange.el-input__inner,
  .el-date-editor--timerange.el-input,
  .el-date-editor--timerange.el-input__inner {
    width: 2.4rem;
    background: rgba(0, 0, 0, 0);
    border: 1px solid #fff;
    height: 0.35rem;
    line-height: 0.35rem;
  }
  .el-date-editor .el-range-input {
    background: rgba(0, 0, 0, 0);
    color: #fff;
    font-size: 0.14rem;
  }
  .el-date-editor .el-range-separator {
    color: #fff;
    line-height: 0.27rem;
    font-size: 0.14rem;
  }
  .el-date-editor .el-range__icon {
    color: #fff;
    line-height: 0.28rem;
  }
}
</style>
<style lang="scss" scoped>
.box2 {
  .table1 {
    font-size: 0.16rem;
    color: #fff;
    .table1_top {
      border-bottom: 1px solid #fff;
      padding: 0.2rem 0;
      padding-top: 0.1rem;
      display: flex;
      align-items: center;
    }
    .table1_cett {
      display: flex;
      border-bottom: 1px solid #364071;
      height: 0.6rem;
      align-items: center;
    }
    .table1_cett:last-child {
      border: 0;
    }
    .tt1 {
      width: 6%;
      text-align: center;
      padding: 0 0.1rem;
    }
    .tt2 {
      padding: 0 0.1rem;
      width: 15%;
      text-align: center;
    }
    .tt3 {
      padding: 0 0.1rem;
      width: 8%;
      text-align: center;
    }
    .tt4 {
      padding: 0 0.1rem;
      width: 9%;
      text-align: center;
    }
    .tt5 {
      padding: 0 0.1rem;
      width: 10%;
      text-align: center;
    }
    .tt6 {
      padding: 0 0.1rem;
      width: 11%;
      text-align: center;
    }
    .tt7 {
      padding: 0 0.1rem;
      width: 8%;
      text-align: center;
    }
    .tt8 {
      padding: 0 0.1rem;
      width: 10%;
      text-align: center;
    }
    .tt9 {
      padding: 0 0.1rem;
      width: 13%;
      text-align: center;
    }
    .tt10 {
      padding: 0 0.1rem;
      width: 10%;
      text-align: center;
    }
  }
  .cent {
    background-color: rgba(128, 128, 128, 0.2);
    height: calc(100% - 42% - 1rem);
    width: 100%;
    border-radius: 0.2rem;
    padding: 0 0.2rem;
    margin-top: 2%;
  }
  .cett {
    .cttt {
      font-size: 0.2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      .topp_tt {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-bottom: 5%;
        width: 17%;
        .topp_tt1 {
          font-size: 0.18rem;
          color: #efefef;
        }
        .topp_tt2 {
          font-size: 0.3rem;
          font-weight: 600;
          margin-top: 0.15rem;
        }
      }
    }
    color: #fff;
    .topp {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.2rem;
      font-weight: 500;
      margin-bottom: 0.3rem;
      .topp_tt {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        .topp_tt1 {
          font-size: 0.16rem;
          color: #efefef;
        }
        .topp_tt2 {
          font-size: 0.3rem;
          font-weight: 600;
          margin-top: 0.2rem;
        }
      }
    }

    padding-top: 0.3rem;
    background: rgba(49, 140, 255);
    height: 40%;
    border-radius: 0.2rem;
    margin-top: 0.1rem;
  }
  .titt {
    color: #fff;
    font-size: 0.3rem;
    text-align: center;
    font-weight: 600;
    cursor:pointer;
  }
  .top {
    display: flex;
    align-items: center;
    padding: 0.1rem 0;
    justify-content: space-between;
  }
}
.table {
  .center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4% 0;
    border-bottom: 1px solid #aaa;
    .image {
      width: 0.55rem;
      height: 0.55rem;
    }
    .text1 {
      color: #fff;
      width: calc(100% - 1.2rem);
      padding: 0 0.1rem;
      .ttt {
        font-size: 0.2rem;
        font-weight: 600;
        margin-bottom: 0.2rem;
      }
      .ttt1 {
        font-size: 0.15rem;
        font-weight: 500;
      }
    }
    .text2 {
      color: #409eff;
      font-size: 0.15rem;
      cursor: pointer;
    }
  }
  .center:first-child {
    padding-top: 0;
  }
  .center:last-child {
    border: 0;
  }
}
.container {
  background: url("../../assets/image/bei.png");
  height: 100vh;
  width: 100%;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-around;
  padding: 0.2rem;
  min-width: 1200px;
  min-height:700px
}
.box1 {
  width: 23%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .cent {
    background-color: rgba(128, 128, 128, 0.2);
    height: 32%;
    width: 100%;
    border-radius: 0.2rem;
    padding: 0 0.2rem;
  }
}
.box2 {
  width: 52%;
}
.box3 {
  width: 23%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .cent {
    background-color: rgba(128, 128, 128, 0.2);
    height: 32%;
    width: 100%;
    border-radius: 0.2rem;
    padding: 0 0.2rem;
  }
}
.title {
  .text {
    font-size: 0.2rem;
    font-weight: 600;
  }
  .text1 {
    font-size: 0.16rem;
    cursor: pointer;
  }
  color: #fff;
  height: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.echart {
  height: calc(100% - 0.5rem);
}
</style>
